<template>
	<div class="theContent">
		<contentTitle title="各村产值情况"><btnList :data="buttonList" :cur.sync="type" @onClick="onTypeChanged"></btnList></contentTitle>
		<contentBox class="theEchart"><Echart id="villageSort" :options="option" class="charts" ref="charts" /></contentBox>
	</div>
</template>

<script>
import contentBox from '@/components/contentBox.vue';
import contentTitle from '@/components/contentTitle.vue';
import btnList from '@/components/btnList.vue';
import { listByVillage } from '@/api/home.js';

export default {
	name:"villageSort",
	components: {
		contentBox,
		contentTitle,
		btnList
	},
	data() {
		return {
			type: 1, //1 面积  2-产值
			buttonList: [{ value: 1, label: '面积' }, { value: 2, label: '产值' }],
			listPlant:[], // 通过 initListData() 传参赋值
			listSale:[], // 通过 initListData() 传参赋值
			option: {},
			linearGradient1: null, //渐变色1
			linearGradient2: null //渐变色2
		};
	},	
	computed: {
		unit() {
			return this.type == 1 ? '亩' : '万元';
		},
		listCurrent() {
			return this.type == 1 ? this.listPlant : this.listSale;
		},
		yAxisDataList() {
			return this.listCurrent.map(item => item.villageName);
		},
		seriesDataList() {
			return this.type == 1 ? this.listPlant.map(item => item.acreage) : this.listSale.map(item => item.amount);
		}
	},
	
	created() {
		this.linearGradient1 = {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 1,
			y2: 1,
			colorStops: [
				{
					offset: 0,
					color: '#00CC7C' // 0% 处的颜色
				},
				{
					offset: 1,
					color: '#FFCC8E' // 100% 处的颜色
				}
			],
			globalCoord: false // 缺省为 false
		};

		this.linearGradient2 = {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 1,
			y2: 1,
			colorStops: [
				{
					offset: 0,
					color: '#F7931A' // 0% 处的颜色
				},
				{
					offset: 1,
					color: '#FFCC8E' // 100% 处的颜色
				}
			],
			globalCoord: false // 缺省为 false
		};
	},
	
	methods: {
		initListData(listPlant,listSale){
			this.listPlant = listPlant
			this.listSale = listSale
			this.onTypeChanged()
		},
		initOption() {
			// console.log("villageSort: initOption")
			// 排序倒序
			this.listPlant
				.sort((a, b) => {
					return a.acreage - b.acreage;
				})
				.reverse()
				.forEach((item, index) => {
					item.sort = index;
				});

			this.listSale
				.sort((a, b) => {
					return a.amount - b.amount;
				})
				.reverse()
				.forEach((item, index) => {
					item.sort = index;
				});

			let theChart = this.$refs.charts.chart;
			let width = theChart.getWidth();

			this.option = {
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01],
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false
					}
				},
				yAxis: {
					type: 'category',
					data: this.yAxisDataList,
					inverse: true, //反向坐标轴
					axisLabel: {
						margin: 20,
						lineHeight: 30,
						padding: [3, 0, 0, 0],
						overflow: 'truncate',
						ellipsis: '...',
						rich: {
							//排序1
							a1: {
								fontSize: 24,
								color: '#00CC7C',
								fontWeight: 'bold',
								width: 80
							},
							//排序2
							a2: {
								fontSize: 24,
								color: '#F7931A',
								fontWeight: 'bold',
								width: 80
							},
							// 村名
							b: {
								fontSize: 24,
								color: '#E0E0E0',
								width: 120
							}
						},
						formatter: (value, index) => {
							const item = this.listCurrent.find(item => item.villageName == value);
							const sort = item && item.sort + 1;
							if (sort <= 3) {
								return `{a1|No.${sort}}{b|${value}}`;
							} else {
								return `{a2|No.${sort}}{b|${value}}`;
							}
						}
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					}
				},
				grid: {
					right: '15%',
					top: 20,
					bottom: 20,
					left: '22%'
				},
				label: {
					show: true,
					color: '#E0E0E0',
					fontSize: 24,
					align: 'center',
					verticalAlign: 'center',
					position: 'left',
					offset: [width * 0.85 - 150, 0],
					formatter: `{c} ${this.unit}`
				},
				series: [
					{
						name: '值',
						type: 'bar',
						showBackground: true,
						data: this.seriesDataList,
						barWidth: 15,
						backgroundStyle: {
							borderRadius: 10 // 统一设置四个角的圆角大小
						},
						itemStyle: {
							borderRadius: 10, // 统一设置四个角的圆角大小
							color: params => {
								return params.dataIndex < 3 ? this.linearGradient1 : this.linearGradient2;
							}
						}
					}
				],

				dataZoom: [
					{
						type: 'inside',
						id: 'villageZoom',
						filterMode: 'none', //filter,weakFilter,empty,none
						startValue: 0,
						endValue: 10,
						minValueSpan: 10,
						maxValueSpan: 20,
						yAxisIndex: [0],
						zoomOnMouseWheel: false, // 关闭滚轮缩放
						moveOnMouseWheel: true // 开启滚轮平移
					}
				]
			};
		},

		onTypeChanged() {
			//通过参数绑定传值  :cur.sync="type"
			this.$nextTick(() => {
				this.initOption();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.theContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;

	.theEchart {
		flex: 1;
	}
}
</style>
